<!--
 * @Description: 
 * @Author: 客
 * @Date: 2024-11-04 16:56:15
 * @LastEditors: 客
 * @LastEditTime: 2024-11-04 17:34:32
 * 这课真牢啊
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/css.css">
</head>
<body>
  <h1>css和html文件结合的三种方式</h1>
  <h2>1.内联样式</h2>
  <div>在html标签中,使用style属性指定css样式</div>
  <div style="color:red;font-size: 100px;">css内联样式</div>
  <h2>2.内部样式表</h2>
  <div>在html文件中head标签中使用style标签,在stle标签内部写css代码</div>
  <div id="iss">内部样式表</div>
  <h2>3.外部样式表</h2>
  <div>css外部样式表是独立写在.css文件中 在html文件中head标签引入</div>
  <div id="oss">外部样式表</div>
  <h2>4.优先级测试</h2>
  <div id="myDiv">优先级测试</div>
  <h2>5.类选择器测试</h2>
  <div class="myClass1">类选择器测试1</div>
  <div class="myClass1">类选择器测试1</div>
  <div class="myClass2">类选择器测试2</div>
  <div class="myClass2">类选择器测试2</div>
  <div class="myClass2">类选择器测试2</div>

  <style>
    /* 内部样式表 */
    /* */
    /* div{
      color: blue;
      font-size: 50px;
    } */
     #iss{
       color: blue;
       font-size: 50px;
     }
     #myDiv{
       color: red;
       
     }
    
  </style></style>
</body>
</html>